﻿<!DOCTYPE html>  
<html>
<head>
<title>Geolocation API Example</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
 <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization">      </script>
<script type="text/javascript">

    function setText(val, e) {
        document.getElementById(e).value = val;
    }

    function insertText(val, e) {
        document.getElementById(e).value += val;
    }

    var nav = null;

    function requestPosition() {
        if (nav == null) {
            nav = window.navigator;
        }
        if (nav != null) {
            var geoloc = nav.geolocation;
            if (geoloc != null) {
                geoloc.getCurrentPosition(successCallback);
            }
            else {
                alert("geolocation not supported");
            }
        }
        else {
            alert("Navigator not found");
        }
    }



    function successCallback(position) {
        setText(position.coords.latitude, "latitude");
        setText(position.coords.longitude, "longitude");
    }

    function showlocation() {
        navigator.geolocation.getCurrentPosition(function (position) {
            var coords = position.coords;
            var latitude = coords.latitude;
            var longitude = coords.longitude;
            document.getElementById("location").innerHTML = "current position latitude:" + latitude + ";longitude:" + longitude;
            map = new google.maps.Map(document.getElementById('mapdisplay'), {
                zoom: 4,
                center: new google.maps.LatLng(latitude, longitude),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            });
        });
    }


</script>
</head>
<body>
<label for="latitude">Latitude: </label><input id="latitude" /> <br />
<label for="longitude">Longitude: </label><input id="longitude" /> <br />
<input type="button" onclick="requestPosition()" value="Get Latitude and Longitude"  /> 
    <input type="button" onclick="showlocation()" value="showlocation"  /> 
    <h1 id="location"> your location:</h1>
    <div id="mapdisplay"></div>

</body>
</html>